<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎来到聊天室</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="application/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script type="application/javascript" src="/js/jquery.cookie.js"></script>
    <script type="application/javascript" src="/layui/layui.js"></script>
    <script type="application/javascript" src="/js/plugin.js"></script>
</head>

<body class="layui-layout-body">
<table class="layui-table" lay-data="{url: '/chat/room/user_list', page:true, id:'idTest'}" lay-filter="del">
    <thead>
    <tr>
        <th lay-data="{field:'chat_id'}">聊天室ID</th>
        <th lay-data="{field:'chat_name'}">聊天室名称</th>
        <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听工具条
        table.on('tool(del)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        type: "post",
                        url: "/chat/room/del",
                        dataType: "html",
                        contentType:"application/json",
                        data: JSON.stringify(obj.data),
                        success: function () {
                            obj.del();
                            layer.close(index);
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });
    });
</script>
<!--    &lt;!&ndash; 内容主体区域 &ndash;&gt;-->
<!--    <form class="layui-form">-->
<!--        <div class="layui-form-item" style="text-align: center;">-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="chat_id" required lay-verify="required" placeholder="请输入聊天室id" autocomplete="off"-->
<!--                    class="layui-input" style="display: inline-block;width: auto;">-->
<!--                <button class="layui-btn" lay-submit lay-filter="del">删除</button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </form>-->
<!--    <script>-->
<!--        layui.use('form', function () {-->
<!--            var form = layui.form;-->
<!--            //监听提交-->
<!--            form.on('submit(del)', function (data) {-->
<!--                $.ajax({-->
<!--                    type: "post",-->
<!--                    url: "/chat/room/del",-->
<!--                    dataType: "html",-->
<!--                    contentType:"application/json",-->
<!--                    data: JSON.stringify(data.field),-->
<!--                    success: function () {-->
<!--                        reload();-->
<!--                    }-->
<!--                });-->
<!--                return false;-->
<!--            });-->
<!--        });-->
<!--    </script>-->
</body>

</html>